<template>
	<el-form :model="form" status-icon :rules="rules" ref="form" label-width="130px" class="login-container">
		<h3 class="login_title">系统登录</h3>
		<el-form-item label="用户名" label-width="80px" prop="username" class="username">
			<el-input type="input" v-model="form.username" autocomplete="off" placeholder="请输入账号admin" @keyup.enter.native="handleLogin"></el-input>
		</el-form-item>
		<el-form-item label="密码" label-width="80px" prop="password">
			<el-input type="password" v-model="form.password" autocomplete="off" placeholder="请输入密码admin123" @keyup.enter.native="handleLogin"></el-input>
		</el-form-item>
		<el-row style="margin-bottom: 40px;">
				<el-button type="primary" @click="handleLogin" :loading="loading" style="width: 100%;">
					<span v-if="!loading">登 录</span>
					<span v-else>登 录 中...</span>
				</el-button>
		</el-row>
	</el-form>
</template>

<script>
// import Mock from 'mockjs'
import { login } from '/api/userapi.js'
import StringUtils from '/utils/stringUtils.js'
export default {
	name: 'login',
	data(){
		return {
			loading: false,
			form: {
				username: "admin",
				password: "admin123"
			},
			rules: {
				username: [
					{ required: true, message: "请输入用户名", trigger: "blur" },
					{
						min: 3,
						message: "用户名长度不能小于3位",
						trigger: "blur"
					}
				],
				password: [
					{ required: true, message: "请输入密码", trigger: "blur" },
					{
						min: 3,
						message: "密码长度不能小于3位",
						trigger: "blur"
					}
				]
			}
		}
	},
	methods:{
		menuTreeData(list){
			function getChildMenu(item,list){
				let sublist = list.filter(s=>{
					if(s.pid != item.id) return false
					return true
				})
				if(sublist.length>0)
				{
					sublist.forEach(t=>{
						getChildMenu(t,list)
					})
					item.children = sublist
				}
			}
			
			let r = []
			list.forEach(t=>{
				if(t.pid ==0 && t.menuname != '首页'){
					getChildMenu(t,list)
					r.push(t)
				}
			})
			if(r.length == 0){
				r = list
			}
			return r;
		},
		handleLogin(){
			this.loading = true;
			localStorage.removeItem('token')  //登录前清空token,防止过期后无法登录
			login(this.form).then( ({data: res}) => {
				if(res.code === 200) {
					let menu = res.data.menu
					let menu2 = []
					menu.forEach(t=>{
						let item = {
							id: t.menuId,
							pid: t.parentId,
							name: t.component,
							label: t.menuName,
							path: t.path,
							url: t.component,
							icon: t.icon,
							visible: t.visible
						}
						menu2.push(item)
					})
					let menu3 = this.menuTreeData(menu2)
					this.$store.commit('clearMenu')
					this.$store.commit('setMenu', menu3)  //保存menu
					this.$store.commit('addMenu', this.$router)  //动态添加路由
					const token = res.data.token
					const expdate = res.data.expdate
					localStorage.setItem('token',token)  //保存token
					localStorage.setItem('expdate',expdate)  //保存过期时间
					localStorage.setItem('lastdate', StringUtils.formatDate(new Date()) )  //保存最后刷新时间
					this.$router.push({name: 'home'})
				}
				else{
					this.$message.warning(res.msg)
				}
			})
		}
	},

}
</script>

<style>
.gb{
	background-image: url("/src/assets/images/login-background.jpg");
}
.login-container{
	position: absolute;
	left: calc(50% - 210px);
	top: calc(50% - 210px);
	border-radius: 15px;
	background-clip: padding-box;
	width: 350px;
	padding: 35px 35px 15px 35px;
	background-color: #ffffff;
	border: 1px solid #eaeaea;
	box-shadow: 0 0 25px #cac6c6;
}
.login_title{
	margin: 0px auto 40px auto;
	text-align: center;
	color: #505458;
}
.login_submit{
	display: flex;
}
</style>